<template>
	<view class="nav-style" :style="{ background: bgColor || ''}">
		<view class="ss-flex ss-col-center ss-row-between">
			<image 
			class="back-icon" 
			:src="sheep.$url.static('/assets/img/zqlist-back.png')" 
			mode="aspectFill"
			@tap="sheep.$router.back()"
			></image>
			<text class="text-title font-AlibabaPuHuiTiSemiBold ss-flex-1">{{props.title}}</text>
			<view class="right-box ss-flex ss-col-center">
				<slot></slot>
			</view>
		</view>
		<slot name="custom"></slot>
	</view>
	
</template>

<script setup>
	import sheep from '@/sheep';
	const props = defineProps({
		title: {
			type: String
		},
		bgColor:{
			type:String
		}
	})
	
</script>

<style lang="scss" scoped>
	.nav-style{
		padding: 88rpx 0 40rpx 0;
		width: 100%;
		box-sizing: border-box;
		position: sticky;
		top:0rpx;
		z-index: 999;
		background-color: #f6f6f6;
		.back-icon{
			margin-left: 24rpx;
			width: 50rpx;
			height: 50rpx;
			z-index:99;
		} 
		.text-title{
			position: absolute;
			top:86rpx;
			bottom: 0;
			left: 0;
			right: 0;
			margin: 0 auto;
			white-space: nowrap;
			height: 58rpx;
			font-weight: normal;
			font-size: 40rpx;
			color: #232323;
			line-height: 58rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
		.right-box{
			margin-right: 24rpx;
		}
	}
	
</style>
